import Vue from 'vue'
import VueRouter from 'vue-router'
// import HomeView from '../views/Home/index.vue'   => 默认读取目录下的index.vue 

// 同步组件 => 在页面加载时同步加载 (缺点: 初始渲染开销比较大,同时加载的模块较多,页面加载速度会变慢, 优点:切换开销比较少)
import HomeView from '../views/Home';
import HeaderView from '../layout/HeaderView.vue';
import FooterView from '../layout/FooterView.vue';

// 路由懒加载:  在页面加载时同步加载,并不会被加载, 当路由被访问的时候才加载对应组件，这样就更加高效了 (单独打包)

// 在Vue中配置Vue-router(插件)
Vue.use(VueRouter)


// 老项目主页面: http://localhost:8080/#/home
// 迭代后的主页面: http://localhost:8080/#/

// 路由配置
const routes = [
	{
		path: '/',
		alias: "/home",    //  / 别名 /home ->   /home  /  都可以访问相同的路由页面    
		name: 'root',

		// 在配置路由的同时,携带一些自定义数据(可以不止一条)   => 当前路由被访问时  this.$route.meta
		meta:{
			title:"首页"
		},
		// component: HomeView   一个路由路径指定一个视图(default)
		// 一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件
		components:{
			default:HomeView,
			header:HeaderView,
			footer:FooterView,
		}
	},
	// {
	//   path: '/home',
	//   name: 'home',
	//   component: HomeView
	// },
	{
		path: '/home',
		redirect: "/",   // 访问 /home -> 重定向至 /
	},
	{
		path: '/list',  //路由地址(小写)
		name: 'list',
		// component: () => import('../views/List')   // 组件的地址
		meta:{
			title:"商品列表"
		},
		components:{
			default:() => import('../views/List'),
			header:HeaderView,
			footer:FooterView,
		}
	},
	{
		// 动态路径参数  => /datail/100 => 匹配 /detail/:id  => id = 100
		// 动态路径参数  => /datail/100/200/300 => 匹配 /detail/:id/:a/:b  => {id:100,a:200,b:300}
		path: '/detail/:id',  //路由地址(小写)
		name: 'detail',  //命名路由
		meta:{
			title:"商品详情",
			showBack:true,
			needVip:true,
		},
		// component: () => import('../views/Detail')   // 组件的地址
		components:{
			default:() => import('../views/Detail') ,
			header:HeaderView,
		},
		beforeEnter:(to,from,next)=>{
			console.log("to1",to);
			console.log("from1",from);
			// next(false);
			next();
		}

	},
	{
		// 测试query传递数据 
		path: '/detailCopy',  //路由地址(小写)
		name: 'detailCopy',  //命名路由
		component: () => import('../views/Detail')   // 组件的地址
	},
	{
		path: '/login',
		name: 'login',
		component: () => import('../views/Login')
	},
	{
		path: '/car',
		name: 'car',
		meta:{
			title:"购物车",
			showBack:true,
		},
		// component: () => import('../views/Car')
		components:{
			default:() => import('../views/Car'),
			header:HeaderView,
		},
	},
	{
		path: '/mine',
		// component: () => import('../views/Mine'),
		components:{
			default:() => import('../views/Mine'),
			header:HeaderView,
		},
		children: [
			{  
				// 如果只访问一级路由 /mine  => 默认显示订单页
				path: "",
				meta:{
					title:"我的",
					showBack:true,
				},
				name: 'mine',
				component:()=>import('../views/Mine/Order')
			},
			{  
				// 手动拼接path -> 麻烦  (/ 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径)
				path: "/mine/order",
				name: "order",
				meta:{
					title:"我的",
					showBack:true,
				},
				component:()=>import('../views/Mine/Order')
			},
			{   
				// 自动拼接path  /mine/order
				path: "collection",
				name: "collection",
				meta:{
					title:"我的",
					showBack:true,
				},
				component:()=>import('../views/Mine/Collection')
			}
		]
	},
	{
		path: '/404',
		name: "notFound",
		component: () => import('../views/NotFound')
	},
	{
		//  会匹配所有路径  -> 匹配所有指定路由路径以外的所有路径    => 跳转到 /404路由  (非法路由路径看不到被看到)
		path: "*",
		// redirect:"/404"    // 指定path  
		// redirect:{name:"notFound"},    // 指定name  
		redirect: (to) => {
			console.log(to);  // * 匹配的路由信息  =>   当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分
			return { name: "notFound", query: { tips: to.params.pathMatch } }    // 根据函数返回值 绝对跳转的位置
		},
	}
	// {
	//   // 会匹配所有路径  -> 匹配所有指定路由路径以外的所有路径     => 显示NotFound组件  (非法路由路径依然可以被看到)
	//   // 当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分
	//   path: '*',
	//   component: () => import('../views/NotFound')   /
	// }
]


console.log(11111, process.env.BASE_URL);

// router 路由实例 (包含所有的路由配置)
const router = new VueRouter({
	// mode: 'hash',   // hash模式
	mode: 'history',   // hash模式
	// base: process.env.BASE_URL,  // "/"
	base: "/shop",  // "/shop"
	routes
})




// 模拟接口 验证是否是vip
// let judgeVip = function(){
// 	return new Promise(function(resolve){
// 		setTimeout(()=>{
// 			resolve(true);
// 		},500);
// 	})
// }



// 全局路由守卫 => 
// 1. 前置路由守卫   => 每次进行路由跳转均会触发
// 2. 解析路由守卫
// 3. 后置后置

// router.beforeEach(async (to,from,next)=>{
// 	// to  => 要跳转的路由信息
// 	// from  => 当前的路由信息 (如果刷新  name=null)
// 	console.log("to",to);
// 	console.log("from",from);

// 	// 需要vip  
// 	if(to.meta.needVip){
// 		// 验证是否是vip(后端)
// 		var isVip = await judgeVip();
// 		if(isVip){
// 			next();
// 		}else{
// 			// next(false);  // 不跳转
// 			// alert("你还不是vip");

// 			if(confirm("你还不是vip,现在充值享受8折优惠!")){
// 				next("/login");  
// 			}else{
// 				next(false);
// 			}
			
// 		}
// 	}else{
// 		next();
// 	}

// })





export default router
